<script setup>
  import { onMounted, ref,getCurrentInstance  } from 'vue';
  import axios from 'axios';
  import BookList from "@/components/BookList.vue";

  const typePage = ref([]); // 按类型查询页面对象
  const typeList = ref([]); // 书籍分类列表
  const activeName = ref("hotSelling"); // 激活的标签页名字
  // 热销榜页面对象
  const topPage = ref({});
  // 查询参数
  const param = ref({
    pageNum: 1,
    pageSize: 12
  });
  // 初始化书籍类型
  const initBookType = async () => {
    try {
      const resp = await axios.get('/bookType/findAll');
      // console.log(resp.data);
      // console.log(resp.status);
      typeList.value = resp.data; // 获取响应数据
    } catch (error) {
      console.error('Error fetching book types:', error);
    }
  }
  //查询排名的书籍
  const initTop = async () => {
    const resp = await axios.post('/book/top', param.value);
    topPage.value = resp.data;
  };
  // 处理分页组件的切换
  const handleCurrentPage = (val) => {
    param.value.pageNum = val;
    initTop();
  };
  //处理按分类查询分页
  const handleTypeCurrentPage = (val) => {
    param.value.pageNum = val;
    findByType();
  };
  //处理分类查询数据
  const findByType = async ()=>{
    // console.log(param.value)
    const resp = await axios.post('/book/findByType', param.value);
    typePage.value = resp.data
  }
  //处理标签切换的问题
  const handleTabChange = (tab)=>{
    // 打印整个 tab 对象
    // console.log("Tab 对象：", tab);
    // 获取代理对象中的数据
    const typeId = tab.props.name;  // 对应于 type.id
    //这个tab.props.name就是typeId
    // console.log("标签名：", typeId);
    // 跳转到第1页去
    param.pageNum = 1;
    //根据标签名判断调用哪个方法
    switch (tab.props.name) {
      case 'hotSelling':
        initTop();
        break;
      default:
        // 转成整数再赋值给typeId
        param.value.typeId = parseInt(tab.props.name);
        // console.log(param)
        findByType();
        break;
    }
  }
  onMounted(() => {
    // 调用初始化书籍类型方法
    initBookType();
    //查询排名的书籍
    initTop();
  });

</script>
<template>
  <div>
    <!-- 导航标签页  -->
    <el-tabs type="border-card" @tab-click="handleTabChange" v-model="activeName" >
      <!-- 第1个标签页，默认显示的 -->
      <el-tab-pane name="hotSelling">
          <template #label>
            <el-icon><Document /></el-icon>热销榜
          </template>
          <book-list :book-list="topPage.records"
                     :current-page="param.pageNum"
                     :page-size="param.pageSize"
                     :total-items="topPage.total"
                     @change-page="handleCurrentPage">
          </book-list>
      </el-tab-pane>
      <!-- 从数据库表中查询出来并且显示 -->
      <el-tab-pane
          v-for="type in typeList" :key="type.id" :label="type.name"
          :name="String(type.id)">
        <template #label>
          <el-icon><Notebook /></el-icon>{{ type.name }}
        </template>
        <!-- 按类型查询书籍 -->
        <book-list :book-list="typePage.records"
                   :current-page="param.pageNum"
                   :page-size="param.pageSize"
                   :total-items="typePage.total"
                   @change-page="handleTypeCurrentPage">
        </book-list>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<style scoped>
</style>